<!-- 搜索结果组件页 -->
<template>
  <div>
    <n-input-group class="h-full flex justify-center !items-center">
            <n-button type="primary" size="large">
               想要寻找什么？
            </n-button>
            <!-- v-model:value大意了，ui组件用法坑 -->
            <n-input size="large" v-model:value="keyword" placeholder="write some here" :style="{ width: '500px' }" />
            <n-button size="large" type="primary" ghost :disabled="!keyword" @click="handleSearch">
               搜索
            </n-button>
    </n-input-group>

    <n-breadcrumb separator=">"  >
      <n-breadcrumb-item  >
         首页</n-breadcrumb-item
      >
      <n-breadcrumb-item >
        {{ title }}</n-breadcrumb-item
      >
    </n-breadcrumb>
    <UiSearch>
      <UiSearchItem
        v-for="(item, index) in searchHeadList"
        :key="index"
        :rowData="item"
      >
        <UiSearchItemText v-for="(item1, index1) in item.subList" :key="index1">
          {{ item1.label }}
        </UiSearchItemText>
      </UiSearchItem>
    </UiSearch>
    <!-- 搜索渲染 -->
    <LoadingGroup
      :pending="pending"
      :error="error"
      :isEmpty="rows.length === 0"
    >
      <template #loading>
        <LoadingCourseSkeleton />
      </template>
      <n-grid :x-gap="20" :cols="4">
        <n-gi v-for="(item, index) in rows" :key="index">
          <CourseList :item="item" />
        </n-gi>
      </n-grid>
      <!-- 分页组件 -->
      <div class="flex justify-center items-center mt-5 mb-10">
        <n-pagination
          size="large"
          :item-count="total"
          :page="page"
          :page-size="limit"
          :on-update:page="handlePageChange"
        />
      </div>
    </LoadingGroup>
  </div>
</template>

<script setup>
import {
  NGrid,
  NGi,
  NPagination,
  NBreadcrumb,
  NBreadcrumbItem,
  NInputGroup, NButton, NInput,NDrawerContent
} from "naive-ui";


const route = useRoute();
const title = ref(route.query.keyword);
const type = ref(route.params.type);
useHead({ title });

const state = reactive({
  searchHeadList: [
    {
      type: "no1",
      name: "场景",
      subList: [
        { label: "分类1", value: 1 },
        { label: "分类2", value: 1 },
        { label: "分类3", value: 1 },
        { label: "分类4", value: 1 },
        { label: "分类5", value: 1 },
        { label: "分类6", value: 1 },
        { label: "分类7", value: 1 },
        { label: "分类8", value: 1 },
        { label: "分类9", value: 1 },
        { label: "分类10", value: 1 },
        { label: "分类11", value: 1 },
        { label: "分类12", value: 1 },
        { label: "分类13", value: 1 },
        { label: "分类14", value: 1 },
        { label: "分类15", value: 1 },
        { label: "分类16", value: 1 },
        { label: "分类17", value: 1 },
      ],
    },
    {
      type: "no1",
      name: "分类",
      subList: [{ label: "分类1", value: 1 }],
    },
    {
      type: "no1",
      name: "格式",
      subList: [{ label: "分类1", value: 1 }],
    },
  ],
});

const { searchHeadList } = toRefs(state);

const tabs = [
  {
    label: "课程",
    value: "course",
  },
  {
    label: "专栏",
    value: "column",
  },
];

//tab点击路由跳转
const handleClick = (t) => {
  navigateTo({
    params: {
      ...route.params,
      type: t,
    },
    query: {
      ...route.query,
    },
  });
};

// //搜索功能
// const page = ref(parseInt(route.params.page));
// const limit = ref(10);
// const { data, pending, error, refresh } = await useSearchListApi(() => {
//     return {
//         type: type.value,
//         page: page.value,
//         keyword: encodeURIComponent(title.value),
//     };
// });

// //搜索结果数据预处理
// const rows = computed(() => data.value?.rows ?? []);
// //搜索结果总数
// const total = computed(() => data.value?.count ?? 0);

// const handlePageChange = (p) => {
//     navigateTo({
//         params: {
//             ...route.params,
//             page: p,
//         },
//         query: {
//             ...route.query,
//         },
//     });
// };

const { page, limit, pending, error, refresh, rows, total, handlePageChange } =
  await usePage(({ page, limit }) =>
    useSearchListApi(() => {
      return {
        type: type.value,
        page,
        keyword: encodeURIComponent(title.value),
      };
    })
  );

//Query参数刷新页面实现
const stop = watch(
  () => route.query.keyword,
  (val) => {
    title.value = val;
    refresh();
  }
);

//搜索输入框
const keyword = ref("")
let handleSearch = () => {
   navigateTo({
      name: "search-type-page",
      params: {
         type: "course",
         page: 1,
      },
      query: {
         keyword: keyword.value,
      },
   })
   setTimeout(() => {
      close()
   }, 200);
}
//定义回车键监听事件
let addKeydown = (e) => {
   document.addEventListener("keydown", handleEnterEvent)
}
//移除事件
let removeKeydown = () => {
   document.removeEventListener("keydown", handleEnterEvent)
}

//页面销毁时解除监听
onBeforeUnmount(() => {
  stop();
});

definePageMeta({
  middleware: ["search"],
});
</script>
